<template>
    <div class="app-setDrawer">
        <el-drawer v-model="setDrawerVisible" size="45rem" :show-close="false" @close="handleClose">
            <template #header>
                <div class="app-setDrawer-header">
                    <div class="app-setDrawer-header-logo">
                        <img src="@/assets/images/avatar.png" alt="" w-full h-full>
                    </div>
                    <div class="app-setDrawer-header-title">
                        <h3 fs-16>{{ active.title }}</h3>
                        <p fs-12 mt4>{{ active.content }}</p>
                    </div>
                </div>
            </template>
            <div class="app-setDrawer-main">
                <div class="app-setDrawer-main-left-nav">
                    <div class="user-info flex-x" :class="{ 'menu-select': active.title == userTitle.title }"
                        @click="handleSelect(userTitle)">
                        <img class="user-info-img" src="@/assets/images/avatar.png" alt="">
                        <p ml4 v-show="!globalStore.mobile">{{ userStore.userInfo.name }}</p>
                    </div>
                    <hr />
                    <div class="menu-part">
                        <ul mt10 class="menu-part-ul">
                            <li class="menu-part-li flex-x" :class="{ 'menu-select': active.title == item.title }"
                                v-for="item in menuList" @click="handleSelect(item)">
                                <img class="menu-part-li-img" :src="`src/assets/images/svg/icon_${item.icon}.svg`" alt="">
                                <p ml4 fs-13 v-show="!globalStore.mobile">{{ item.title }}</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="app-setDrawer-main-right-content">
                    <component :is="setComponents[active.compont]" />
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { useGlobalStore } from '@/store/module/global';
import { useUserStore } from '@/store/module/user'
import Personal from './compontents/personalInfo.vue'
import Open from './compontents/open.vue'
import SidebarSet from './compontents/sidebarSet.vue'
import Icon from './compontents/icon.vue'
import Wallpaper from './compontents/wallpaper.vue'
import { type Component } from 'vue';

const userTitle = { title: '个人信息', content: '', compont: 'Personal' }
const active = reactive({
    title: '个人信息',
    content: '',
    compont: 'Personal'
})
const setComponents: Record<string, Component> = {
    'Personal': Personal,
    'Open': Open,
    'SidebarSet': SidebarSet,
    'Icon': Icon,
    'Wallpaper': Wallpaper,
}
const menuList = [
    { title: '打开方式', icon: 'open', content: '图标、搜索结果', compont: 'Open' },
    { title: '搜索栏', icon: 'search', content: '搜索栏样式、翻译' },
    { title: '图标', icon: 'icon', content: '图标样式、图标间距、宽度',compont:'Icon' },
    { title: '时间/日期', icon: 'time', content: '时间显示内容、字体样式' },
    { title: '主题/壁纸', icon: 'wallpaper', content: '深色主题、主题色',compont:'Wallpaper' },
    { title: '布局', icon: 'layout', content: '极简模式、一言' },
    { title: '侧边栏', icon: 'sidebar', content: '侧边栏位置、是否隐藏、宽度', compont: 'SidebarSet' },
    { title: '备份与恢复', icon: 'backup', content: '数据保存至云端、享受多设备同步' },
    { title: '重置设置', icon: 'reset', content: '恢复默认设置' },
    { title: '关于', icon: 'about', content: '版本：1.3.40' },
]

const userStore = useUserStore()
const globalStore = useGlobalStore()
const setDrawerVisible = computed(() => globalStore.setDrawerVisible)

const handleClose = () => {
    globalStore.updateSetDrawerVisible(false)
}

const handleSelect = (val: any) => {
    active.title = val.title
    active.content = val.content
    active.compont = val.compont
}
</script>

<style lang="scss">
.app-setDrawer {
    position: relative;

    .el-drawer {
        background-color: var(--bg-card);
        color: var(--d-main);
        @include response(phone) {
            width: 80% !important;
        }
    }

    .el-drawer__header {
        padding: 0;
        margin: 0;
    }

    .el-drawer__body {
        padding: 0;
    }

    &-header {
        padding: 26px;
        color: var(--d-main);

        &-logo {
            height: 6.6rem;
            width: 6.6rem;
            position: absolute;
            left: -10px;
            top: -10px;

            img {
                border-radius: 60%;
            }
        }

        &-title {
            margin-left: 130px;
            height: 3.4rem;

            h3 {
                color: var(--d-main);
            }
        }
    }

    &-main {
        padding-bottom: 4px;
        height: 100%;
        display: flex;

        &-left-nav {
            --bg-active: rgba(24, 144, 255, 0.1);
            --bg-hover: rgba(0, 0, 0, .04);
            width: 14rem;
            height: 100%;

            @include response(phone) {
                width: 6rem;
            }

            .user-info {
                padding: 8px;

                border-radius: 6px;
                margin: 0 8px 10px 8px;
                cursor: pointer;

                @include response(phone) {
                    padding: 6px;
                    margin: 0 6px 8px 6px;
                }

                &-img {
                    width: 3rem;
                    height: 3rem;
                    border-radius: 6px;
                }

                &:hover {
                    background-color: rgba(var(--alpha-color), .04);
                }
            }

            .menu-part {
                &-ul {
                    list-style: none;
                }

                &-li {
                    padding: 8px;
                    border-radius: 6px;
                    margin: 0 8px 8px 8px;
                    cursor: pointer;

                    @include response(phone) {
                        padding: 6px;
                        margin: 0 6px 8px 6px;
                    }

                    &-img {
                        width: 3rem;
                        height: 3rem;
                        border-radius: 6px;
                        background-color: var(--icon-bg);
                    }

                    &:hover {
                        background-color: rgba(var(--alpha-color), .04);
                    }
                }
            }

            .menu-select {
                background-color: var(--bg-active);
                color: var(--primary-color);
                pointer-events: none;
            }
        }

        &-right-content {
            flex: 1;
            height: 100%;
            background-color: var(--bg-body);
            border-radius: 10px;
            padding: 10px;
        }
    }
}
</style>